<template>
  <div class="all">
    <ul>
      <li> <el-button type="primary" plain size="mini" @click="addNewshow()">添加靓号</el-button></li>
      <li class="Nall-right">
        <el-date-picker
          v-model="time1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          size="mini"
          >
        </el-date-picker>
        <span><el-input v-model="condition.number" placeholder="请输入内容" size="mini"></el-input></span>

        <span>        是否签约:   <select name="" id="" v-model="condition.digit">
          <option value="0">不限</option>
          <option :value="value" v-for="(value,name) in digit">{{value}}位</option>
        </select></span>
<span>        销售情况:<select name="" id="" v-model="condition.sales">
          <option value="0">不限</option>
          <option value="1">已销售</option>
          <option value="2">未销售</option>
        </select></span>
<span>
  所有者UID: <el-input v-model="condition.Uid" placeholder="请输入内容" size="mini"></el-input>
</span>
<span><button @click="search()">搜索</button></span>

      </li>
    </ul>
<div style="margin-top: 15px;">
  <table width="100%" cellspacing="0">
    <thead>
      <tr>
        <th width="180px">靓号</th>
        <th width="100px">位数</th>
        <th width="100px">价格</th>
        <th width="180px">销售情况</th>
        <th width="180px">添加时间</th>
        <th width="180px">备注</th>
        <th width="200px">管理操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(val,name) in list">
        <td align="center"><font color="#FF6600"><b>{{val.name}}</b></font></td>
        <td>{{val.leng}}位</td>
        <td>{{val.price}}</td>
        <td v-if="val.sales===1">未销售</td>
        <td v-else>已出售</td>
        <td>{{val.addtime}}</td>
        <td>{{val.remark}}</td>
        <td>
          <i @click="amend(val)">修改</i>| <i @click="give(val)">赠送</i> | <i>删除</i>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="Page" v-if="condition.pageSize<condition.quantity">
        <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="condition.pageIndex"
          :page-sizes="[20,30,40,50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="condition.quantity">
        </el-pagination>

  </div>
</div>
<!-- 赠送&&修改 -->
<div class="Nall-sup" v-show="show">
  <h3 v-if="type==1">修改--{{add.name}}</h3>
  <h3 v-else-if="type==2">赠送--{{add.name}}</h3>
   <h3 v-else>添加靓号</h3>
  <ul>
    <li>靓号</li>
    <li v-if="type!=3"><font color="#FF6600" ><b>{{add.name}}</b></font></li>
    <li v-else><input type="text" v-model="add.name"><i class="el-icon-warning"></i> <span>请输入靓号</span></li>

  </ul>
  <ul>
    <li v-if="type==1">价格</li>
    <li v-else>赠送</li>
    <li v-if="type!=3"><input type="text" v-model="add.number" />
    <i class="el-icon-warning"></i><span v-if="type==1">请输入价格。</span><span v-else>请输入赠送对象UID。</span></li>
    <li v-else><input type="text" v-model="add.number"><i class="el-icon-warning"></i> <span>请输入靓号价格</span></li>
  </ul>
  <button @click="cancel()">取消</button>
  <button @click="confirm()">确定</button>
</div>
<!-- 添加 -->
<!-- <div class="Nall-add" v-show="addshow">

  <ul>
    <li>靓号</li>

  </ul>
  <ul>
    <li>价格</li>
    <li><input type="text" v-model="add_new.price"><i class="el-icon-warning"></i> <span>请输入价格</span></li>
  </ul>
  <button @click="cancel()">取消</button>
  <button @click="addnew()">提交</button>
</div> -->

  </div>
</template>

<script>
  export default{
     inject:["reload"],
    data(){
      return{
        time1: [],
        //位数
        digit:{
          id1:3,
          id2:4,
          id3:5,
          id4:6,
          id5:7,
          id6:8,
        },
        //搜素条件
        condition:{
          number:'',
          digit:0,
          Uid:'',
          sales:0,
          pageIndex:1,
          pageSize:20,
          quantity:21,
        },
       list:[
         {name:520,
         leng:3,
         price:8888,
         sales:1,
         addtime:'2015-07-04 16:59:35',
         remark:''
         }
       ],
        type:'',
        show:false,//赠送
        add:[],
       }
        },
        methods:{
          //搜索
          search(){
            this.condition.time1=this.time1[0]
            this.condition.time2=this.time1[1]
            //this.Postdata();
            console.log(this.condition)
          },
          //每页数量
          handleSizeChange(val) {

            this.condition.pageSize=val
             //this.Postdata();
            console.log(`每页 ${val} 条`);
          },
          // 翻页
           handleCurrentChange(val) {
             //this.condition.pageIndex=val
             this.Postdata();
          },
          //修改
          amend(e){
            this.show=true
            this.add.name=e.name
            this.add.number=e.price
            this.type=1
            // this.add.leng=e.leng
          },
          //赠送
          give(e){
            this.show=true
            this.type=2
            this.add.name=e.name
          },
          //添加显示
          addNewshow(){
            this.show=true
            this.type=3
          },
          //取消
          cancel(){
            this.show=false
            this.add=[]
          },
          //赠送&&修改&&添加
          confirm(){
            if(this.type!=2){
              this.add.price=this.add.number//修改的价格
              console.log(this.add)
            }else{
              this.add.owner=this.add.number//添加的UID
              console.log(this.add)
            }
            if(type==1){
              this.Postdata()//修改
            }else if(type==2){
              this.Postdata()//赠送
            }else{
            this.Postdata()//添加
          }
          },
          //请求
          postdata(url,e){
           var _this=this
           this.$axios({
             method: "POST",
             url: '/api/'+url,
             headers: {'Content-Type': 'application/json'},
             data: {   adminName:_this.$cookies.get('adminName'),
                       token:_this.$cookies.get('token'),
                       price:e.price,
                       name:e.name,

                   },
           }).then(res=>{
                if(res.data.code==1){
                  if(res.data.data!=null){
                    _this.list=res.data.data
                    _this.condition.quantity=res.data.data.sum
                  }
                }
           })
          }

        },
        mounted() {
         // this.postdata('',this.add)
        }


        }
</script>

<style scoped>
  .Page{
    margin: auto;
    width: 50%;
  }
  .Nall-right{
    margin-left: 10px;
    display: inline-flex;
  }
  li{
    height: 1.875rem;
    line-height: 1.875rem;
  }
.el-input{
  width: 130px;
}
span{
  margin-left: 5px;
}
.Nall-number{
  color: #FF6600;
}
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
tr{
  text-align: center;
}
td{
  border-bottom:1px solid #eee ;
  height: 35px;
  line-height: 35px;
}
 .Nall-add,.Nall-sup{
  z-index: 5;
  width: 430px;
  position: fixed;
  top: 37%;
  left: 42%;
  height: 200px;
  border: 1px solid #999;
}
.el-icon-warning{
  color: #40B3FF;
}
  .Nall-add span,.Nall-sup span{
  font-size: 12px;
}
  .Nall-add ul,.Nall-sup ul{
  height: 30px;
  border-bottom: 1px solid #eee;
  width: 390px;
  margin: auto;
  }
  .Nall-add li, .Nall-sup li{
    margin-left: 10px;
  }
 .Nall-add button, .Nall-sup button{
float: right;
    margin-right: 12px;
    margin-top: 77px;
  }
</style>
